
<!-- Diagram-page layout -->
<div id="diagram-page">

   <div id="diagram-select" class="faux-select"
        onclick="$('#diagram-choices').toggle(); event.stopPropagation()">
      <div class="faux-select-arrow"></div>
      <div id="diagram-choice" class="faux-select-value"></div>
      <ol id="diagram-choices" class="faux-select-options display-none-on-clean"></ol>
   </div>
   <template id="diagram-generate-diagram-template">
      <span>Generate diagram</span>
   </template>
   <template id="diagram-choice-template">
      <span data-diagram-name="${diagram.name}">${diagram.name}</span>
   </template>

   <div id="generation-control">
      <div class="graphic-lead">Generate diagram this way:</div>
      <div id="generation-strategy" style="position: relative; min-width: 300px;">
         <table>
            <thead>
               <tr>
                  <th></th>
                  <th>Generator</th>
                  <th>Axis</th>
                  <th>Order</th>
               </tr>
            </thead>
            <tbody id="generation-table">
            </tbody>
         </table>

         <!-- Templates for generation-strategy table -->
         <template id="generation-table-row-template">
            <tr>
               <td draggable="true">${inx+1}</td>
               <td action="Generator.showGeneratorMenu(event, ${inx})">
                  ${Group.representation[strategy.generator]}
               </td>
               <td action="Generator.showAxisMenu(event, ${inx})">
                  <img src="./images/${Generator.axis_image[strategy.layout][strategy.direction]}">
                  ${Generator.axis_label[strategy.layout][strategy.direction]}
               </td>
               <td action="Generator.showOrderMenu(event, ${inx})">
                  ${Generator.orders[strategies.length][strategy.nestingLevel]}
               </td>
            </tr>
         </template>

         <template id="generation-generator-menu-template">
            <ul id="generation-generator-menu" class="menu remove-on-clean">
               ${makeEligibleGeneratorList()}
               <hr>
               ${Menu.makeLink('Organize by', 'generation-organize-by-menu')}
            </ul>
            <ul id="generation-organize-by-menu" class="menu remove-on-clean">${Generator.makeOrganizeByMenu()}</ul>
         </template>
         <template id="generation-generator-menu-item-template">
            <li action="Generator.updateGenerator(${strategy_index}, ${generator})">
               ${Group.representation[generator]}</li>
         </template>

         <template id="generation-axis-menu-template">
            <ul id="generation-axis-order-menu" class="menu remove-on-clean">
               <li action="Generator.updateAxes(${strategy_index}, 'linear', 'X')">${Generator.axis_label['linear']['X']}</li>
               <li action="Generator.updateAxes(${strategy_index}, 'linear', 'Y')">${Generator.axis_label['linear']['Y']}</li>
               <li action="Generator.updateAxes(${strategy_index}, 'linear', 'Z')">${Generator.axis_label['linear']['Z']}</li>
               <div class="${curvable ? '' : 'hidden'}">
                  <li action="Generator.updateAxes(${strategy_index}, 'circular', 'XY')">${Generator.axis_label['circular']['XY']}</li>
                  <li action="Generator.updateAxes(${strategy_index}, 'circular', 'XZ')">${Generator.axis_label['circular']['XZ']}</li>
                  <li action="Generator.updateAxes(${strategy_index}, 'circular', 'YZ')">${Generator.axis_label['circular']['YZ']}</li>
                  <li action="Generator.updateAxes(${strategy_index}, 'rotated', 'XY')">${Generator.axis_label['rotated']['XY']}</li>
                  <li action="Generator.updateAxes(${strategy_index}, 'rotated', 'XZ')">${Generator.axis_label['rotated']['XZ']}</li>
                  <li action="Generator.updateAxes(${strategy_index}, 'rotated', 'YZ')">${Generator.axis_label['rotated']['YZ']}</li>
               </div>
               <hr>
               ${Menu.makeLink('Organize by', 'generation-organize-by-menu')}
            </ul>
            <ul id="generation-organize-by-menu" class="menu remove-on-clean">${Generator.makeOrganizeByMenu()}</ul>
         </template>

         <template id="generation-order-menu-template">
            <ul id="generation-order-menu" class="menu remove-on-clean">
               ${makeStrategyList()}
               <hr>
               ${Menu.makeLink('Organize by', 'generation-organize-by-menu')}
            </ul>
            <ul id="generation-organize-by-menu" class="menu remove-on-clean">${Generator.makeOrganizeByMenu()}</ul>
         </template>
         <template id="generation-order-menu-item-template">
            <li action="Generator.updateOrder(${strategy_index}, ${order})">
               ${Generator.orders[num_strategies][order]}</li>
         </template>

         <template id="generation-organize-by-menu-item-template">
            <li action="Generator.organizeBy(${inx})">
               <i>H</i><sub>${inx}</sub>, a subgroup of order ${subgroup.order}
            </li>
         </template>
      </div>
   </div>

   <div id="arrow-control">
      <div id="arrow-heading">Show these arrows:</div>
      <ul id="arrow-list"></ul>
      <button id="arrow-add-button" action="Arrow.showArrowMenu(event)">Add</button>
      <button id="arrow-remove-button" action="Arrow.removeArrow()" disabled class="disable-on-clean">Remove</button>

      <template id="arrow-list-item-template">
         <li arrow="${element}" color="${color}" action="Arrow.selectArrow(${element})">
            <hr style="border: 2px solid ${color}">${Group.representation[element]}</li>
      </template>
      <template id="arrow-menu-template">
         <ul id="arrow-menu" class="menu remove-on-clean" style="min-width: 80px">
            ${makeArrowList()}
         </ul>
      </template>
      <template id="arrow-menu-item-template">
         <li action="Arrow.addArrow(${element})">${Group.representation[element]}</li>
      </template>
   </div>

   <form id="multiplication-control" class="graphic-lead" style="margin-bottom: 0">
      Arrows mean
      <div>
         <input name="multiplication" type="radio" id="right" checked>
         <label for="right">right multiplication</label>
      </div>
      <div>
         <input name="multiplication" type="radio" id="left">
         <label for="left">left multiplication</label>
      </div>
   </form>

   <div id="chunk-control" style="position: relative">
      <div class="graphic-lead">Chunk this subgroup:</div>
      <div id="chunk-select" class="faux-select"
           onclick="$('#chunk-choices').toggle(); event.stopPropagation()">
         <div class="faux-select-arrow"></div>
         <div id="chunk-choice" class="faux-select-value">(no chunking)</div>
         <ol id="chunk-choices" class="faux-select-options display-none-on-clean"></ol>
      </div>
      <template id="chunk-no-chunking-template">
         <span data-chunk="0">(no chunking)</span>
      </template>
      <template id="chunk-select-subgroup-template">
         <span data-chunk="${subgroupIndex}">
            <i>H</i><sub>${subgroupIndex}</sub>, generated by { ${generators.join(', ')} }
         </span>
      </template>
      <template id="chunk-select-whole-group-template">
         <span data-chunk="${Group.subgroups.length - 1}">The whole group</li>
      </template>

      <div id="chunking-fog" class="fog hidden"></div>
   </div>
</div>
